<template>
  <ScrollBox class="code-view" scroll-x scroll-y>
    <pre :class="`language-typescript`"><code v-html="html"></code></pre>
  </ScrollBox>
</template>

<script lang="ts">
import 'prismjs/themes/prism.css'
import Prism from 'prismjs'
// 必须在 Prism 之后引入
import 'prismjs/components/prism-typescript.js'

import ScrollBox from './ScrollBox.vue'
import { computed, defineComponent } from 'vue'

export default defineComponent({
  name: 'CodeView',
  components: { ScrollBox },
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const html = computed(() => {
      return Prism.highlight(props.content, Prism.languages['typescript'], 'typescript')
    })
    return { html }
  }
})
</script>

<style lang="scss">
.code-view {
  max-width: 100%;

  pre {
    margin: 0;
  }
}
</style>
